<template>
  <ol class="breadcrumb" aria-label="breadcrumbs" v-show="1">
    <li class="breadcrumb-item" v-show="navgationIndex>0"><a href="/">Home</a></li>
    <li class="breadcrumb-item" v-show="navgationIndex>1"><a href="/projectList">ProjectList</a></li>
    <li class="breadcrumb-item" v-show="navgationIndex>2">
      <a href="#" @click="goDashboardBread" v-show="current_pid!=null">Dashboard</a>
    </li>
    <li class="breadcrumb-item" v-show="navgationIndex>3">
      <a href="#" @click="goIssueListBread" v-show="issue_status!=null">IssueList</a>
    </li>
    <li class="breadcrumb-item" v-show="navgationIndex>4">
      <a href="#" @click="goIssueDetailBread" v-show="current_issue_pk!=null">IssueDetail</a>
    </li>
  </ol>
</template>

<script>
import {mapActions, mapGetters} from "vuex";

export default {
  name: "BreadCrumbShow",
  props:{
    navgationIndex:0
  },
  methods: {
    ...mapActions([
      'navigationChange',
      'projectChange',
      'goDashboardBread',
      'goIssueListBread',
      'goIssueDetailBread'
    ])
  },
  computed: {
    ...mapGetters([
      'token',
      'current_pid',
      'issue_status',
      'current_issue_pk',
      'navigationCode'
    ])
  },
  created() {
    console.log('bread crumb token:',this.token)
    console.log('bread crumb nvcode:',this.navigationCode)
    console.log('bread crumb pid:',this.current_pid)
    console.log('bread crumb status:',this.issue_status)
    console.log('bread crumb pk:',this.current_issue_pk)
  }
}
</script>

<style scoped>

</style>
